<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理系统</title>
    <link rel="stylesheet" th:href="@{/css/layui.css}">
</head>
<body class="layui-layout-body">
<form class="layui-form" action="/saveUserInfo">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input th:value="${user.username}" type="text" name="username" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input th:value="${user.password}" type="text" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份</label>
        <div class="layui-input-inline">
            <select th:value="${user.role}" disabled name="role" lay-verify="required">
                <option value="1" th:selected="${user.role ==1}">普通用户</option>
                <option value="2" th:selected="${user.role ==2}">管理员</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input th:value="${user.name}" type="text" name="name"  placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证</label>
        <div class="layui-input-inline">
            <input th:value="${user.identityNum}" type="text" name="identityNum"  placeholder="请输入身份证号码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-inline">
            <input th:value="${user.phone}" type="text" name="phone"  placeholder="请输入手机号码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <div class="layui-input-inline">
            <input th:value="${user.birthday}" type="text" name="birthday" placeholder="（YYYY-MM-DD）" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <input th:value="${user.address}" type="text" name="address" placeholder="请输入地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script th:src="@{layui.js}"></script>
<script th:src="@{js/jquery-3.3.1.js}"></script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){

            let request = {}
            request.username = data.field.username
            request.password = data.field.password
            request.role = data.field.role
            request.name = data.field.name
            if (data.field.address) {
                request.address = data.field.address
            }
            if (data.field.identityNum) {
                request.identityNum = data.field.identityNum
            }
            if (data.field.phone) {
                request.phone = data.field.phone
            }
            if (data.field.birthday) {
                request.birthday = data.field.birthday
            }
            console.log(request)
            $.ajax({
                url:'/saveUserInfo',
                type:'post',
                async:false,
                data: request,
                contentType:'application/x-www-form-urlencoded',
                dataType:'json',
                success:function (data) {
                    layer.msg(data.msg)
                }
            });

            // layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>